<template>
  <div class="tag-container">
    <span class="tag-text">{{title||''}}</span>
    <close @click="close" class="tag-close" width="10px" height="10px"></close>
  </div>
</template>

<script>
import close from './close.vue'

export default {
  name: "tag",
  props:['title'],
  components: {
      close,
  },
  methods: {
      close() {
          this.$emit('close')
      }
  }
};
</script>

<style scoped>
  .tag-container {
    display: inline-block;
    padding: 0 7px;
    width: auto;
    background: #fafafa;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: default;
  }
  .tag-container .tag-text {
      font-size: 12px;
      color:rgba(0,0,0,.65)
  }
  .tag-container .tag-close {
    display: inline-block;
    transform: scale(.83333333) rotate(0deg);
    margin-left: 3px;
    color: rgba(0,0,0,.45);
    cursor: pointer;
    transition: all .3s cubic-bezier(.78,.14,.15,.86);
  }
</style>